<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="12">
        <div class="chart-wrapper">
          <line-chart :lines="lines" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper" style="padding-right: 16px">
          <bar-chart :channels="channels" :works="works" />
        </div>
      </el-col>
    </el-row>
    <div class="bar-day-container">
      <div class="select-container">
        <el-select
          v-model="temp.deviceId"
          placeholder="请选择设备"
          @change="queryCurrReport"
        >
          <el-option
            v-for="item in deviceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          @change="onDateChange"
        />
      </div>
      <bar-day-chart :works="dayWorks" />
    </div>
  </div>
</template>

<script>
import { barChar1, queryDeviceCheckCountWeekly, queryCurrReport } from '@/api/attendance'
import { deviceList } from '@/api/device'
import BarDayChart from './components/BarDayChart'
import BarChart from './components/BarChart'
import LineChart from './components/LineChart'
import dayjs from 'dayjs'

export default {
  components: { BarChart, LineChart, BarDayChart },
  data() {
    return {
      channels: [],
      works: [],
      lines: [],
      deviceList: [],
      temp: {
        deviceId: undefined,
        startDate: undefined,
        endDate: undefined
      },
      date: new Date(),
      dayWorks: []
    }
  },
  created() {
    this.barChar1()
    this.queryDeviceCheckCountWeekly()
    this.getDeviceList()
  },
  methods: {
    barChar1() {
      barChar1().then((response) => {
        const { object } = response
        this.channels = object && object.channel || []
        this.works = object && object.work || []
      })
    },
    queryDeviceCheckCountWeekly() {
      queryDeviceCheckCountWeekly().then((response) => {
        this.lines = response.object || []
      })
    },
    queryCurrReport() {
      if (!this.temp.deviceId) {
        return
      }
      queryCurrReport(this.temp).then((response) => {
        const { object } = response
        this.dayWorks = object || []
      })
    },
    getDeviceList() {
      deviceList({ current: 1, size: 1000 }).then((response) => {
        const { records } = response.object
        this.deviceList = records || []
        if (this.deviceList.length) {
          this.temp.deviceId = this.deviceList[0].id
          this.temp.startDate = dayjs(this.date).startOf('day').format('YYYY-MM-DD HH:mm:ss')
          this.temp.startDate = dayjs(this.date).endOf('day').format('YYYY-MM-DD HH:mm:ss')
          this.queryCurrReport()
        }
      })
    },
    onDateChange() {
      this.temp.startDate = dayjs(this.date).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.temp.endDate = dayjs(this.date).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.queryCurrReport()
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 0 16px 16px;
    margin-bottom: 32px;
  }
}
.bar-day-container {
  position: relative;
  background:#fff;
  padding:16px 0 0 16px;
  margin-bottom:32px;
}
.select-container {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
